---
title: Custom Materials
description: How to use custom materials in uikit.
nav: 9
---

uikit allows to provide custom material classes for the background and border on the `Text`, `Container`, and `Image` components. This allows to change the appearance and use more complex (and computationally expensive) materials such as a `MeshPhysicalMaterial`.

In the following example, we are creating a text element with a material based on the phong material with high specular and shininess. Using the border properties, we can create a border that creates the illusion of a 3D Mesh. Specifically, the `borderBend` property allows bending the normals on the border to create this effect efficiently.

<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': '<9',
      '@react-three/uikit': '^1.0.44',
      '@react-three/drei': '<10',
    },
  }}
  files={{"/App.tsx": `import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { Text } from '@react-three/uikit'
import { MeshPhongMaterial } from 'three'

class FancyMaterial extends MeshPhongMaterial {
  constructor() {
    super({
      specular: 0x111111,
      shininess: 100,
    })
  }
}

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <OrbitControls />
      <directionalLight position={[1,0,1]} intensity={10} />
      <Text
        backgroundColor="black"
        color="white"
        padding={24}
        borderRadius={32}
        fontSize={32}
        borderColor="black"
        borderBend={0.3}
        borderWidth={8}
        panelMaterialClass={FancyMaterial}
      >
        I look fancy
      </Text>
    </Canvas>
  )
}`}}
/>

Let's go through the above example step by step. First, we are importing the necessary dependencies.

```tsx showLineNumbers
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { Text } from '@react-three/uikit'
import { MeshPhongMaterial } from 'three'
```

Then, we create a class for the material we want to adapt by changingthe default values.

```tsx showLineNumbers=5
class FancyMaterial extends MeshPhongMaterial {
  constructor() {
    super({
      specular: 0x111111,
      shininess: 100,
    })
  }
}
```

Lastly, the UI can be defined using a `Text` component.

```tsx {15} showLineNumbers=15
export default function App() {
  return (
    <Canvas>
      <OrbitControls />
      <Text
        backgroundColor="black"
        color="white"
        padding={24}
        borderRadius={32}
        fontSize={32}
        borderColor="black"
        borderBend={0.3}
        borderWidth={8}
        panelMaterialClass={FancyMaterial}
      >
        I look fancy
      </Text>
    </Canvas>
  )
}
```
